<template>
  <div>
    <CityHeader></CityHeader>
    <CitySearch :cities="cities"></CitySearch>
    <CityList :hotCities="hotCities" :cities="cities" :letter="letter"></CityList>
    <CityAlphabet :cities="cities" @change="handleAlphabetChange"></CityAlphabet>
  </div>
</template>
  
<script>
import CityHeader from '@/components/city/CityHeader.vue';
import CitySearch from '@/components/city/CitySearch.vue';
import CityList from '../components/city/CityList.vue';
import CityAlphabet from '@/components/city/CityAlphabet.vue';

import axios from 'axios';
export default {
  name: "City",
  components: { CityHeader, CitySearch, CityList, CityAlphabet },
  mounted() {
    this.getCityInfo();
  },
  data(){
    return{
      cities:[],
      hotCities:[],
      letter:''
    }
  },
  methods: {
    getCityInfo() {
      axios.get('/data/city.json').then(res => {

        console.log(res)
        this.cities = res.data.data.cities;
        this.hotCities = res.data.data.hotCities;
      })
    },
    handleAlphabetChange(letter){
      this.letter = letter;
    }
  }
}
</script>
  
<style>

</style>